<template>
    <!-- 组件页面 -->
    <view class="cl-stepper" :data-index="index">
        <view :class="'cl-stepper__minus  ' + (disabled || min >= valueClone ? 'cl-stepper__minus--disabled' : '')" @tap="reduce"></view>
        <input type="number" :disabled="disabled" class="cl-stepper__input" @blur="blur" :value="valueClone" />
        <view :class="'cl-stepper__plus ' + (disabled || valueClone >= max ? 'cl-stepper__minus--disabled' : '')" @tap="plus"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            valueClone: ''
        };
    },
    props: {
        value: {
            type: Number,
            default: 1
        },
        min: {
            type: Number,
            default: 1
        },
        max: {
            type: Number,
            default: 10000
        },
        step: {
            type: Number,
            default: 1
        },
        disabled: {
            type: Boolean,
            default: false
        },
        index: {
            type: Number,
            default: 0
        }
    },
    methods: {
        //通过step属性设置每次点击增加或减少按钮时变化的值，默认为1
        getScale() {
            let scale = 1;
            if (this.step != parseInt(this.step)) {
                //微信小程序的小数计算会出现偏差导致产生很长的无限循环的数，在这块处理一下。
                scale = Math.pow(10, (this.step + '').split('.')[1].length);
            }
            return scale;
        },
        //输入操作处理
        blur: function (e) {
            let value = e.detail.value;
            if (value) {
                value = +value;
                if (value > this.max) {
                    value = this.max;
                } else if (value < this.min) {
                    value = this.min;
                }
            } else {
                value = this.min;
            }
            if (value != this.value) {
                this.setData({
                    valueClone: value
                });
            }
            this.handleChange(value, 'blur');
        },
        calcNum: function (type) {
            if (this.disabled) {
                return;
            }
            const scale = this.getScale();
            let num = this.value * scale;
            let step = this.step * scale;
            if (type === 'reduce') {
                num -= step;
            } else if (type === 'plus') {
                num += step;
            }
            let value = num / scale;
            if (type === 'plus' && value < this.min) {
                value = this.min;
            } else if (type === 'reduce' && value > this.max) {
                value = this.max;
            }
            if (value < this.min || value > this.max) {
                return;
            }
            this.handleChange(value, type);
        },
        //增加按钮处理
        plus: function () {
            this.calcNum('plus');
        },
        //减少按钮处理
        reduce: function () {
            this.calcNum('reduce');
        },
        //事件绑定，返回值有三个，value:值 type:类型（输入，增加，减少） index（当前组件的索引）
        handleChange(value, type) {
            if (this.disabled) {
                return;
            }
            this.$emit('change', {
                detail: {
                    value: value,
                    type: type,
                    index: this.index
                }
            });
        }
    },
    created: function () {},
    watch: {
        value: {
            handler: function (newVal, oldVal) {
                this.valueClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
